<script setup>
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { ref, reactive, computed, onBeforeMount } from 'vue'
const route = useRoute()
const store = useStore()
const state = computed(() => store.state.user)

const data = reactive({
  active: 0
})
localStorage.setItem('userId', 123)
onBeforeMount(async () => {
  if (route.query.ticket) {
    await store.dispatch('user/getUserInfoAction', route.query.ticket)
  } else {
    window.location.href =
      'https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=szkx&goto=https://mapi.zjzwfw.gov.cn/web/mgop/gov-open/zj/2001955714/reserved/index.html'
  }
})
</script>

<template>
  <suspense>
    <router-view v-slot="{ Component }">
      <keep-alive v-if="route.meta.keepAlive">
        <component :is="Component"></component>
      </keep-alive>
      <component :is="Component" v-else></component>
    </router-view>
  </suspense>
  <van-tabbar
    v-if="route.meta.isHasTab"
    v-model="data.active"
    active-color="#2E71DB"
    inactive-color="#7F8389"
    route
  >
    <van-tabbar-item to="/index">
      <span>首页</span>
      <template #icon="props">
        <img src="@a/img/01.png" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item>
      <span>地图</span>
      <template #icon="props">
        <img src="@a/img/02.png" />
      </template>
    </van-tabbar-item>
    <!-- <van-tabbar-item class="round">
      <template #icon="props">
        <img src="@a/img/02.png" />
      </template>
    </van-tabbar-item> -->
    <van-tabbar-item>
      <span>扫一扫</span>
      <template #icon="props">
        <img src="@a/img/03.png" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/user">
      <span>个人中心</span>
      <template #icon="props">
        <img src="@a/img/04.png" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
}
.round {
  flex: 0 1 45px;
  border: 1px solid #333;
  border-radius: 50%;
  transform: translateY(-21px);
  background: WHITE;
  z-index: 10;
}
</style>
